{% extends 'base_user_center.html' %}
{% block right_content %}

<head>
    <meta charset="UTF-8">
    <title>收货地址</title>
    <style>
        .right_content {
            width: 70%;
            margin: auto;
            background-color: #f8f8f8;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        .common_title2 {
            color: #333;
            font-size: 18px;
            margin-bottom: 15px;
        }
        .site_con dl {
            margin-bottom: 10px;
        }
        .site_con dt {
            font-weight: bold;
            float: left;
            width: 100px;
        }
        .site_con dd {
            margin-left: 100px;
        }
        .form_group {
            margin-bottom: 10px;
        }
        .form_group label {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }
        .form_group input[type="text"],
        .form_group textarea {
            padding: 5px;
            width: calc(100% - 110px);
        }
        .form_group2 textarea {
            height: 100px;
        }
        .info_submit {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .info_submit:hover {
            background-color: #0056b3;
        }
    </style>
    <!-- script shi ai写的 -->
    <script>
        document.querySelector("form").addEventListener("submit", function(event) {
            var phoneInput = document.getElementsByName("phone")[0];
            var zipCodeInput = document.getElementsByName("zip_code")[0];
        
            // 验证电话号码
            if (!/^\d{11}$/.test(phoneInput.value)) {
                alert("请输入正确的11位手机号码！");
                event.preventDefault(); // 阻止表单提交
                return;
            }
        
            // 验证邮政编码
            if (!/^\d{6}$/.test(zipCodeInput.value)) {
                alert("请输入正确的6位邮政编码！");
                event.preventDefault(); // 阻止表单提交
                return;
            }
        });
        </script>
</head>
<body>

        <div class="right_content clearfix">
            <h3 class="common_title2">收货地址</h3>
            <div class="site_con">
                <dl>
                    <dt>当前地址：</dt>
                    {% if address %}
                        <dd>{{ address.addr }} （{{ address.receiver }} 收） {{ address.phone }}</dd>
                    {% else %}
                        <dd>无默认地址</dd>
                    {% endif %}
                </dl>
            </div>
            <h3 class="common_title2">编辑地址</h3>
            <div class="site_con">
                <form method="post" id="addressForm">
                    {% csrf_token %}
                    <div class="form_group">
                        <label>收件人：</label>
                        <input type="text" name="receiver" id="receiver">
                        <span class="error-message" id="receiverError"></span>
                    </div>
                    <div class="form_group form_group2">
                        <label>详细地址：</label>
                        <textarea class="site_area" name="addr" id="addr"></textarea>
                        <span class="error-message" id="addrError"></span>
                    </div>
                    <div class="form_group">
                        <label>邮编：</label>
                        <input type="text" name="zip_code" id="zip_code">
                        <span class="error-message" id="zipCodeError"></span>
                    </div>
                    <div class="form_group">
                        <label>手机：</label>
                        <input type="text" name="phone" id="phone">
                        <span class="error-message" id="phoneError"></span>
                    </div>
                    <input type="submit" value="提交" class="info_submit">
                </form>
            </div>
        </div>
        </body>
        <!-- <script>
            document.addEventListener("DOMContentLoaded", function() {
                const form = document.getElementById('addressForm');
                const receiverInput = document.getElementById('receiver');
                const addrInput = document.getElementById('addr');
                const zipCodeInput = document.getElementById('zip_code');
                const phoneInput = document.getElementById('phone');
            
                const receiverError = document.getElementById('receiverError');
                const addrError = document.getElementById('addrError');
                const zipCodeError = document.getElementById('zipCodeError');
                const phoneError = document.getElementById('phoneError');
            
                // 电话号码验证
                function validatePhone(phone) {
                    const regex = /^1[3|4|5|7|9][0-9]{9}$/;
                    return regex.test(phone);
                }
            
                // 邮政编码验证
                function validateZipCode(zipCode) {
                    const regex = /^\d{6}$/;
                    return regex.test(zipCode);
                }
            
                // 监听输入框的变化
                [receiverInput, addrInput, zipCodeInput, phoneInput].forEach(input => {
                    input.addEventListener('input', function() {
                        clearErrors();
                        if (input === phoneInput && !validatePhone(phoneInput.value)) {
                            phoneError.textContent = "请输入正确的11位手机号码。";
                            phoneError.style.display = "block";
                        } else if (input === zipCodeInput && zipCodeInput.value !== '' && !validateZipCode(zipCodeInput.value)) {
                            zipCodeError.textContent = "请输入正确的6位邮政编码。";
                            zipCodeError.style.display = "block";
                        }
                    });
                });
            
                // 提交表单时进行验证
                form.addEventListener('submit', function(event) {
                    let isValid = true;
                    if (!receiverInput.value || !addrInput.value || !phoneInput.value) {
                        receiverError.textContent = "收件人不能为空。";
                        addrError.textContent = "详细地址不能为空。";
                        phoneError.textContent = "手机号码不能为空。";
                        receiverError.style.display = "block";
                        addrError.style.display = "block";
                        phoneError.style.display = "block";
                        isValid = false;
                    }
            
                    if (!validatePhone(phoneInput.value)) {
                        phoneError.textContent = "请输入正确的11位手机号码。";
                        phoneError.style.display = "block";
                        isValid = false;
                    }
            
                    if (zipCodeInput.value !== '' && !validateZipCode(zipCodeInput.value)) {
                        zipCodeError.textContent = "请输入正确的6位邮政编码。";
                        zipCodeError.style.display = "block";
                        isValid = false;
                    }
            
                    if (!isValid) {
                        event.preventDefault(); // 阻止表单提交
                    }
                });
            
                // 清除错误信息
                function clearErrors() {
                    receiverError.textContent = "";
                    addrError.textContent = "";
                    zipCodeError.textContent = "";
                    phoneError.textContent = "";
                    receiverError.style.display = "none";
                    addrError.style.display = "none";
                    zipCodeError.style.display = "none";
                    phoneError.style.display = "none";
                }
            });
            </script> -->
            
{% endblock right_content %}